<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../img/index-bg.png) no-repeat;
            background-size:cover;
            position: relative;
        }

        .title {
            font-size: 34px;
            text-align: center;
            color: #3e3e3e;
            padding-top: 57px;
        }

        .panel {
            background-color: #0f0f1481;
            border-radius: 10px;
            border: solid 1px #626565;
            padding: 10px 25px;
            box-sizing: border-box;
        }

        .panel-content {
            display: inline-block;
            width: 49%;
        }

        .dot {
            width: 11px;
            height: 12px;
        }

        .panel-title {
            font-size: 16px;
            color: #fff;
        }

        .icon {
            width: 63px;
            height: 63px;
            margin: 18px;
        }

        .data {
            display: inline-block;
            text-align: center;
            color: #fff;
            vertical-align: top;
            margin-top: 10px;
            width: 110px;
        }

        .data-content {
            font-size: 36px;
        }

        .data-title {
            font-size: 12px;
        }

        .attendance {
            width: 496px;
            height: 222px;
            position: absolute;
            top: 316px;
            left: 62px;
        }

        .charts {
            width: 210px;
            height: 180px;
            display: inline-block;
        }

        .chart-title {
            font-size: 14px;
            color: #fff;
            margin-top: -45px;
            margin-left: 70px;
        }

        .power {
            width: 496px;
            height: 161px;
            position: absolute;
            top: 139px;
            left: 62px;
        }

        .device {
            width: 496px;
            height: 370px;
            position: absolute;
            top: 460px;
            right: 62px;
        }

        .timer {
            width: 496px;
            height: 153px;
            position: absolute;
            top: 139px;
            right: 63px;
        }

        .timer h3 {
            margin-top: 20px;
            color: #fff;
        }

        .timer h3 span {
            margin-left: 10px;
            margin-right: 60px;
        }

        #time {
            margin-top: 10px;
        }

        .time-cube {
            display: inline-block;
            width: 40px;
            height: 50px;
            line-height: 50px;
            margin: 5px;
            background-color: #eff7ff48;
            border-radius: 5px;
            text-align: center;
            font-size: 37px;
            color: #14f7ff;
        }

        .temp-hum {
            width: 496px;
            height: 140px;
            position: absolute;
            top: 307px;
            right: 63px;
        }

        .alert{
            width: 496px;
            height: 140px;
            position: absolute;
            top: 555px;
            left: 63px;
        }

        /*#comfort {*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: auto;*/
        /*}*/
    </style>
</head>

<body>
<h1 class="title">哈尔滨办公室智能管理系统</h1>
<div class="panel power">
    <h2>
        <img src="../img/KFC-icon/dot.png" class="dot">
        <span class="panel-title">办公室用电量</span>
    </h2>
    <div class="panel-content">
        <img src="../img/KFC-icon/electric.png" class="icon">
        <div class="data">
            <p class="data-content" id="avgEletric">0</p>
            <p class="data-title">平均用电量（度）</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/electricBox.png" class="icon">
        <div class="data">
            <p class="data-content" id="maxEletric">0</p>
            <p class="data-title">最高用电量（度）</p>
        </div>
    </div>
</div>
<div class="panel attendance">
    <h2>
        <img src="../img/KFC-icon/dot.png" class="dot">
        <span class="panel-title">办公考勤概况</span>
    </h2>
    <div class="panel-content">
        <div id="todayAttendance" class="charts"></div>
        <h3 class="chart-title">今日考勤率</h3>
    </div>
    <div class="panel-content">
        <div id="weekAttendance" class="charts"></div>
        <h3 class="chart-title">本周考勤率</h3>
    </div>
</div>
<div class="panel device">
    <h2>
        <img src="../img/KFC-icon/dot.png" class="dot">
        <span class="panel-title">设备数量</span>
    </h2>
    <div class="panel-content">
        <img src="../img/KFC-icon/t&m.png" class="icon">
        <div class="data">
            <p class="data-content" id="tempAndHum">0</p>
            <p class="data-title">温湿度传感器（个）</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/electricBlue.png" class="icon">
        <div class="data">
            <p class="data-content" id="socket">0</p>
            <p class="data-title">智能插座（个）</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/electricBlue.png" class="icon">
        <div class="data">
            <p class="data-content" id="singleSwitch">0</p>
            <p class="data-title">单路智能开关（个）</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/electricBlue.png" class="icon">
        <div class="data">
            <p class="data-content" id="doubleSwitch">0</p>
            <p class="data-title">双路智能开关（个）</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/electricBlue.png" class="icon">
        <div class="data">
            <p class="data-content" id="tripleSwitch">0</p>
            <p class="data-title">三路智能开关（个）</p>
        </div>
    </div>
</div>
<div class="panel timer">
    <h3><span id="date"></span><span id='week'></span></h3>
    <div id="time"></div>
</div>
<div class="panel temp-hum">
    <h2>
        <img src="../img/KFC-icon/dot.png" class="dot">
        <span class="panel-title">办公室平均温湿度</span>
    </h2>
    <div class="panel-content">
        <img src="../img/KFC-icon/temp.png" class="icon">
        <div class="data">
            <p class="data-content"><span id="avgTemp">36</span>℃</p>
            <p class="data-title">平均温度</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/humidity.png" class="icon">
        <div class="data">
            <p class="data-content"><span id="avgHum">59</span>%</p>
            <p class="data-title">平均湿度</p>
        </div>
    </div>
<!--    <h2>-->
<!--        <img src="../img/KFC-icon/dot.png" class="dot">-->
<!--        <span class="panel-title">总体舒适度</span>-->
<!--    </h2>-->
<!--    <div id="comfort"></div>-->
</div>
<div class="panel alert">
    <h2>
        <img src="../img/KFC-icon/dot.png" class="dot">
        <span class="panel-title">办公室温湿度告警</span>
    </h2>
    <div class="panel-content">
        <img src="../img/KFC-icon/temp.png" class="icon">
        <div class="data">
            <p class="data-content"><span id="tempAlert">0</span个</p>
            <p class="data-title">温度告警</p>
        </div>
    </div>
    <div class="panel-content">
        <img src="../img/KFC-icon/humidity.png" class="icon">
        <div class="data">
            <p class="data-content"><span id="humAlert">0</span个</p>
            <p class="data-title">湿度告警</p>
        </div>
    </div>
</div>

<script src="../js/dashboard/jquery.min.js"></script>
<script src="../js/dashboard/echarts.min.js"></script>
<script>
        function renderChart(id, persent) {
            let myChart = echarts.init(document.getElementById(id));
            option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: { formatter: '{value}%' },
                        data: [{ value: persent }],
                        axisLine: {
                            lineStyle: {
                                color: [[persent / 100, '#35ecd8'], [1, '#dcdcdc']],
                                width: 11
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                toolbox: {
                    show: false
                }
            };
            myChart.setOption(option, true);
        }

        function renderTimer() {
            let date = new Date()
            let year = date.getFullYear()
            let month = (date.getMonth() + 1).toString().padStart(2, '0')
            let day = (date.getDate()).toString().padStart(2, '0')
            let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()]
            let hours = date.getHours().toString().padStart(2, '0')
            let min = date.getMinutes().toString().padStart(2, '0')
            let sec = date.getSeconds().toString().padStart(2, '0')

            $('#date').text(year + '-' + month + '-' + day)
            $('#week').text(week)
            $('#time').html(`
            <div class="time-cube">${hours[0]}</div>
            <div class="time-cube">${hours[1]}</div>
            <div class="time-cube">:</div>
            <div class="time-cube">${min[0]}</div>
            <div class="time-cube">${min[1]}</div>
            <div class="time-cube">:</div>
            <div class="time-cube">${sec[0]}</div>
            <div class="time-cube">${sec[1]}</div>
            `)
        }
        setInterval(renderTimer, 1000)

        // function renderComfort(id,arr) {
        //     let myChart = echarts.init(document.getElementById(id));
        //     option = {
        //         xAxis: {
        //             data: ['干燥', '舒适', '潮湿'],
        //             axisTick: {
        //                 alignWithLabel: true
        //             },
        //             axisLine:{
        //                 lineStyle:{
        //                     color:'#fff'
        //                 }
        //             }
        //         },
        //         yAxis: {
        //             data: ['低温', '舒适', '高温'],
        //             type: 'category',
        //             axisTick: {
        //                 alignWithLabel: true
        //             },
        //             axisLine:{
        //                 lineStyle:{
        //                     color:'#fff'
        //                 }
        //             }
        //         },
        //         series: [{
        //             symbolSize: 28,
        //             data: [
        //                 arr
        //             ],
        //             type: 'scatter'
        //         }],
        //         color: '#a0f54d'
        //     };
        //     myChart.setOption(option, true);
        // }

        function init(){
            renderTimer()
            $.ajax({
                url: '/device/getHomePageInfo',
                type: 'GET',
                dataType: 'json',
                success: function(res){
                    console.log(res)
                    $('#avgEletric').text(res.avg_quantity?parseFloat(res.avg_quantity).toFixed(1):0)
                    $('#maxEletric').text(res.max_quantity)
                    renderChart('todayAttendance', 54)
                    renderChart('weekAttendance', 78)
                    $('#tempAndHum').text(res.temperatureNum)
                    $('#socket').text(res.socketNum)
                    $('#singleSwitch').text(res.oneSwitchNum)
                    $('#doubleSwitch').text(res.twoSwitchNum)
                    $('#tripleSwitch').text(res.threeSwitchNum)
                    $('#avgTemp').text(res.avg_temperature?parseFloat(res.avg_temperature).toFixed(1):0)
                    $('#avgHum').text(res.avg_moisture?parseFloat(res.avg_moisture).toFixed(1):0)
                    $('#tempAlert').text(0)
                    $('#humAlert').text(0)
                    // renderComfort('comfort',[1,1])
                 }
            });
        }

        init()

    </script>
</body>

</html>